<!--
 * @Author: your name
 * @Date: 2020-12-22 15:58:55
 * @LastEditTime: 2021-03-18 11:12:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\userDetails.vue
-->
<template>
    <div class="user-detail-cart">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{$t('user.userDetails')}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click='showEditFlag'><i class="el-icon-edit" style="font-size:18px;"></i></el-button>
            </div>
            <div>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="2">
                        <el-form ref="form" :model="form" label-width="200px" >
                            <el-form-item :label="$t('user.loginName')" prop="loginName" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                <el-input v-model="form.loginName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('vsite.userType')" prop="userType" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                <el-input v-model="form.userType" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('warranty.yourName')" prop="userName" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                <el-input v-model="form.userName" :disabled="!flag"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('telphone')" prop="phone" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                <el-input v-model="form.phone" :disabled="!flag"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('address')" prop="address" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                <el-input v-model="form.address" :disabled="!flag"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('email')" prop="email" :rules="emailRules || [{ required: true, message: $t('index_js_notNull')}]">
                                <el-input v-model="form.email" :disabled="!flag"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('country')" prop="country" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                                <el-select v-model="form.country" filterable  clearable :disabled="!flag" @change='changeNation'>
                                    <el-option
                                        v-for="item in nationList"
                                        :key="item.enName"
                                        :label="item.enName"
                                        :value="item.enName"
                                        >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="$t('province')" prop="province" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                <el-select v-model="form.province" filterable  clearable :disabled="!flag" @change='changePro'>
                                    <el-option
                                        v-for="item in provinceList"
                                        :key="item.enName"
                                        :label="item.enName"
                                        :value="item.enName"
                                        >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="$t('city')" prop="city" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                                <el-select v-model="form.city" filterable  clearable :disabled="!flag">
                                    <el-option
                                        v-for="item in cityList"
                                        :key="item.enName"
                                        :label="item.enName"
                                        :value="item.enName"
                                        >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item >
                                <el-checkbox v-model="form.visiable" :disabled="!flag">{{$t('login.isSure2')}}</el-checkbox>
                            </el-form-item>
                            <el-form-item v-if='flag' style="display: flex;justify-content: space-between;">
                                <el-button @click='showEditFlag'>{{$t('user.back')}}</el-button>
                                <el-button @click='loginEditUserDetails'>{{$t('save')}}</el-button>
                            </el-form-item>
                        </el-form>

                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            form:{
                loginName:'',
                userType:'',
                userName:'',
                phone:'',
                address:'',
                email:'',
                country:'',
                province:'',
                city:'',
                visiable:''
            },
            nationList:[],
            provinceList:[],
            cityList:[],
            flag:false,
            id:'',
            dictionary:[],
            emailRules:[{ required: true, message: this.$t('index_js_notNull')},{ type: 'email', message: this.$t('user.msg_reg_email'), trigger: ['blur', 'change']}]
        };
    },
    computed: {

    },
    watch: {
        flag:{
            handler(nv,ov){
                if(nv){
                    this.emailRules = [{ required: true, message: this.$t('index_js_notNull')},{ type: 'email', message: this.$t('user.msg_reg_email'), trigger: ['blur', 'change']}]
                }else{
                    this.emailRules = [{ required: true, message: this.$t('index_js_notNull')}]
                }
            },
            deep:true,
            immediate:true
        }
    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        // this.loginGetUserDetails()
        this.areaSelectCountryAddChoose()
    },
    methods: {
        showEditFlag(){
            this.flag = !this.flag
            if(this.flag){
                this.userGetById()
            }else{
                this.loginGetUserDetails()
            }
        },
        async userGetById(){
            let res = await this.API.userGetById({
                id:localStorage.getItem('userId')
            })
            this.form.email = res.email
        },
        async loginEditUserDetails(){
            if(this.form.email.indexOf('@') == -1){
                return
            }
            if(this.form.visiable){
                this.form.visiable = 1
            }else{
                this.form.visiable = 0
            }
            this.form['id'] = this.id
            let obj = {}
            obj = JSON.parse(JSON.stringify(this.form))
            delete obj.loginName
            delete obj.userType
            
            let res = await this.API.loginEditUserDetails(obj)
            if(this.comm.showMsg(res.success)){
                
            }
            if(this.form.visiable){
                this.form.visiable = true
            }else{
                this.form.visiable = false
            }
        },
        changeNation(){
            this.form.province = ''
            this.form.city = ''
            this.areaSelectNextAreaByName(this.form.country)
        },
        changePro(){
            this.form.city = ''
            this.CareaSelectNextAreaByName(this.form.province)
        },
        async areaSelectNextAreaByName(name){
            let res = await this.API.areaSelectNextAreaByName({
                name:name,
                areaLevel:'2',
            })
            this.provinceList = res
        },
        async CareaSelectNextAreaByName(name){
            let res = await this.API.areaSelectNextAreaByName({
                name:name,
                areaLevel:'3',
            })
            this.cityList = res
        },
        async areaSelectCountryAddChoose(){
            let res = await this.API.areaSelectCountryAddChoose()
            this.nationList = res
        },
        async loginGetUserDetails(){
            let res = await this.API.loginGetUserDetails()
            this.id = res.ids
            Object.keys(this.form).forEach(item =>{
                this.$set(this.form,item,res[item])
            })
            this.form.userType = this.comm.returnCode(this.dictionary,this.form.userType,'value','code')
            if(res.visiable == 1){
                // this.form.visiable = true
                this.$set(this.form,'visiable',true)
            }else{
                this.$set(this.form,'visiable',false)
            }

            if(res.country){
                this.areaSelectNextAreaByName(res.country)
            }
            if(res.province){
                this.CareaSelectNextAreaByName(res.province)
            }
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'USER_TYPE',
                lang:localStorage.getItem('lang')||'zh_CN'
            })
            this.dictionary = res.USER_TYPE || {}
            this.loginGetUserDetails()
        },
    },
};
</script>

<style  lang="less">
.user-detail-cart{
    position: relative;
    .box-card{
        width: 800px;
        min-width: 500px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%);
        margin-top:80px;
    }
    .el-input--small .el-input__inner{
        border: none;
        border-bottom: 1px dashed #ccc;
    }
}
</style>
